<template>
    <div>
        <div>
            <el-input style="width: 200px" placeholder="操作模块名称" v-model="operationSearch"></el-input>
            <!--    <el-input style="width: 200px; margin: 0 5px" placeholder="查询操作类型" v-model="operaTypeSearch"></el-input>-->
            <el-select style="margin:0 10px" v-model="operaTypeSearch" placeholder="选择操作类型">
                <el-option v-for="item in ['查阅','新增','修改','删除','批量删除','登录','注册','重置','导出Excel','导入Excel']" :key="item" :value="item"></el-option>
            </el-select>
            <el-input style="width: 200px; margin: 0 5px" placeholder="操作人名称" v-model="username"></el-input>
            <el-button type="primary" @click="load(1)">查询</el-button>
            <el-button type="success" @click="reset">刷新</el-button>
        </div>
        <div style="margin: 10px 0">
            <!--    <el-button type="danger" plain @click="handleDelBatch">批量删除</el-button>-->
        </div>
        <!--  整个表格，有多选框 -->
        <el-table v-loading="loading" element-loading-text="拼命加载中" :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue',color: '#666'}" @selection-change="handleSelectionChange">
            <!--    复选框-->
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="operation" label="操作模块" align="center"></el-table-column>
            <el-table-column prop="operaType" label="操作类型" align="center"></el-table-column>
            <el-table-column prop="username" label="操作人" align="center"></el-table-column>
            <el-table-column prop="operaIp" label="操作人IP" align="center"></el-table-column>
            <el-table-column prop="operaTime" label="操作时间" align="center" sortable></el-table-column>
            <!--    <el-table-column prop="remark" label="备注(是否内网)"></el-table-column>-->
            <el-table-column prop="remark" label="备注(网络环境)" align="center">
                <template v-slot="scope">
                    <el-tag type="success" v-if="scope.row.remark === '内网'">{{scope.row.remark}}</el-tag>
                    <el-tag v-if="scope.row.remark === '互联网'">{{scope.row.remark}}</el-tag>
                </template>
            </el-table-column>

            <!--    <el-table-column fixed="right" label="操作" align="center" width="180px">-->
            <!--      <template v-slot="scope">-->
            <!--        <el-button size="mini" type="danger" plain @click="handleDel(scope.row)">删除</el-button>-->
            <!--      </template>-->
            <!--    </el-table-column>-->
        </el-table>

        <div style="margin: 10px 0;text-align: center">
            <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total,prev,pager,next" :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Notice',
    data() {
        return {
            tableData: [], //表数据
            pageNum: 1, //当前页码
            pageSize: 10, //每页数量
            operationSearch: '',
            operaTypeSearch: '',
            username: '',
            total: 0, //数据总条数
            user: JSON.parse(localStorage.getItem('userInfo') || '{}'),
            ids: [],
            loading: true,
        }
    },
    created() {
        this.load()
    },
    methods: {
        reset() {
            this.operationSearch = ''
            this.operaTypeSearch = ''
            this.username = ''
            this.load()
        },
        load(pageNum) {
            this.loading = true
            if (pageNum) this.pageNum = pageNum //分页查询时自动切换到第一页
            this.$request
                .get('/logs/findByPage', {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        operation: this.operationSearch,
                        operaType: this.operaTypeSearch,
                        username: this.username,
                    },
                })
                .then((res) => {
                    if (res.code === '200') {
                        if (res.data.records) {
                            this.tableData = res.data.records //若records不显示可替换为List
                        } else {
                            this.$message.error('接口未返回数据，请重新登录')
                        }
                        this.total = res.data.total
                    } else {
                        this.$message.error('分页查询接口异常：' + res.msg)
                    }
                    this.loading = false
                })
        },
        //切换页码
        handleCurrentChange(pageNum) {
            this.load(pageNum)
        },
        //单个删除
        handleDel(row) {
            this.$confirm('确认删除《' + row.title + '》日志吗？', '确认删除', {
                type: 'warning',
            })
                .then((ok) => {
                    this.$request
                        .delete('/logs/delete/' + row.id)
                        .then((res) => {
                            if (res.code == '200') {
                                this.$message.success('删除成功')
                            } else {
                                this.$message.error('删除失败：' + res.msg)
                            }
                            this.load(this.pageNum) //刷新表格
                        })
                })
                .catch(() => {}) //catch捕捉先不做处理
        },
        //批量删除之前--多选框，参数是选中的行对象
        handleSelectionChange(rows) {
            this.ids = rows.map((row) => row.id) //流和表达式，将行id提取出来存入数组
        },
        //批量删除
        handleDelBatch() {
            //校验：点击批量删除按钮之前，未选择多选框时提示
            if (!this.ids.length) {
                this.$message.warning('请选择需要批量删除的日志！')
                return
            }

            this.$confirm(
                '你确认批量删除[' + this.ids + ']这些日志吗？',
                '确认删除',
                { type: 'warning' }
            )
                .then((ok) => {
                    this.$request
                        .delete('/logs/deleteBatch', { data: this.ids })
                        .then((res) => {
                            if (res.code == '200') {
                                this.$message.success('批量删除成功')
                            } else {
                                this.$message.error('批量删除失败:' + res.msg)
                            }
                            this.load(this.pageNum) //刷新表格
                        })
                })
                .catch(() => {}) //catch捕捉先不做处理
        },
    },
}
</script>

<style>
</style>